<script setup lang="ts">
import type { SettlementActualReceiptPayment } from '@/api/types/finance'
import type { InfoItem } from '@/components/DetailCard.vue'
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { getSettlementActualReceiptPaymentById } from '@/api/finance'
import ApprovalActionBar from '@/components/ApprovalActionBar.vue'
import DetailCard from '@/components/DetailCard.vue'
import StatusDisplay from '@/components/StatusDisplay.vue'
import { getStatusName } from '@/constants/enums'
import { useFlow } from '@/hooks/useFlow'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '其他实付详情',
    enablePullDownRefresh: true,
  },
})

// 获取路由参数
const flowIdValue = ref('')
const idValue = ref('')

// 使用流程相关功能
const { currentProcess, getProcessInstance, getCurrentUserPendingTaskId, loading } = useFlow()

// 业务详情数据
const detailData = ref<SettlementActualReceiptPayment | null>(null)
const errorMessage = ref('')

// 各卡片信息 - 使用计算属性配置
const basicInfo = computed<InfoItem[]>(() => {
  const data = detailData.value
  if (!data)
    return []
  return [
    {
      label: '业务编号',
      key: 'businessNo',
      value: data.businessNo || '-',
    },
    {
      label: '业务类型',
      key: 'businessType_dictText',
      value: data.businessType_dictText || '-',
    },
    {
      label: '业务类型',
      key: 'billType',
      value: getStatusName('billType', data.billType),
    },
    {
      label: '审批状态',
      key: 'approvalStatus',
      value: data.approvalStatus,
      type: 'approval',
    },
    {
      label: '创建时间',
      key: 'createTime',
      value: data.createTime || '-',
    },
    {
      label: '创建人',
      key: 'createName',
      value: data.createName || '-',
    },
  ]
})

const financeInfo = computed<InfoItem[]>(() => {
  const data = detailData.value
  if (!data)
    return []
  return [
    {
      label: '收付金额',
      key: 'amount',
      value: data.amount ? `￥${data.amount.toFixed(2)}` : '-',
      type: 'currency',
    },
    {
      label: '收付方式',
      key: 'payType_dictText',
      value: data.payType_dictText || '-',
    },
    {
      label: '结算类型',
      key: 'settlementType',
      value: data.settlementType === 1 ? '实收' : data.settlementType === 2 ? '实付' : '-',
    },
    {
      label: '客户结算实体',
      key: 'customerSettlementEntityName',
      value: data.customerSettlementEntityName || '-',
    },
    {
      label: '系统结算实体',
      key: 'systemSettlementEntityName',
      value: data.systemSettlementEntityName || '-',
    },
  ]
})

const businessInfo = computed<InfoItem[]>(() => {
  const data = detailData.value
  if (!data)
    return []
  return [
    {
      label: '业务机构',
      key: 'businessInstitutionName',
      value: data.businessInstitutionName || '-',
    },
    {
      label: '业务部门',
      key: 'businessDepartmentName',
      value: data.businessDepartmentName || '-',
    },
    {
      label: '业务员',
      key: 'salesmanName',
      value: data.salesmanName || '-',
    },
    {
      label: '调整日期',
      key: 'adjustmentDate',
      value: data.adjustmentDate || '-',
    },
    {
      label: '调整原因',
      key: 'adjustmentReason',
      value: data.adjustmentReason || '-',
    },
  ]
})

const processInfo = computed<InfoItem[]>(() => {
  const process = currentProcess.value
  return [
    {
      label: '流程实例ID',
      key: 'processId',
      value: process?.id || '-',
    },
    {
      label: '流程状态',
      key: 'processStatus',
      value: process?.status || '-',
    },
  ]
})

// 获取业务详情数据
async function getBusinessData() {
  try {
    await getProcessInstance(idValue.value)
    // 获取当前用户待审批任务ID
    const taskId = await getCurrentUserPendingTaskId(idValue.value)
    if (taskId) {
      flowIdValue.value = taskId
    }
    if (!currentProcess.value) {
      errorMessage.value = '获取流程信息失败，请重试'
      return
    }
    const res = await getSettlementActualReceiptPaymentById(currentProcess.value.businessKey)
    detailData.value = res.data || null
  }
  catch (error) {
    console.error('获取其他实付详情失败:', error)
    errorMessage.value = '获取数据失败，请重试'
  }
}

// 页面加载
onLoad((e: any) => {
  flowIdValue.value = e.flowId || ''
  idValue.value = e.id || ''
})
// 页面显示
onShow(() => {
  // 页面显示时刷新数据
  if (idValue.value) {
    getBusinessData()
  }
})
onPullDownRefresh(async () => {
  await getBusinessData()
  uni.stopPullDownRefresh()
})
onUnload(() => {
  // 页面卸载时清除数据
  uni.hideToast()
  errorMessage.value = ''
})
</script>

<template>
  <view class="page-container">
    <!-- 审批状态卡片 -->
    <ApprovalStatusCard :current-process="currentProcess" :id-value="idValue" />
    <!-- 状态显示组件 -->
    <StatusDisplay
      :loading="loading"
      :error-message="errorMessage"
      :show-retry="true"
      @retry="getBusinessData"
    />

    <!-- 详情内容 -->
    <view v-if="detailData" class="content-container">
      <!-- 基本信息卡片 -->
      <DetailCard
        title="基本信息"
        :info-list="basicInfo"
      />

      <!-- 财务信息卡片 -->
      <DetailCard
        title="财务信息"
        :info-list="financeInfo"
      />

      <!-- 业务信息卡片 -->
      <DetailCard
        title="业务信息"
        :info-list="businessInfo"
      />

      <!-- 流程信息卡片 -->
      <DetailCard
        title="流程信息"
        :info-list="processInfo"
      />
    </view>

    <!-- 审批操作栏 -->
    <ApprovalActionBar
      v-if="flowIdValue && currentProcess?.status === 1"
      :process-id="flowIdValue"
    />
  </view>
</template>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部操作栏留出空间 */
}

.content-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>
